<template>
  <div>
    <basic-container>
      <el-tabs @tab-click="aaa">
        <el-tab-pane label="待报废" name="0" >
          <avue-crud :option="option" :data="gridData" :table-loading="loading" :page="page" ref="crud" 
                 @size-change='sizeChanges'
                 @current-change="currentPages">
            <template slot-scope="scope" slot="scrapType">
              {{ formatterStatus(scope.row.scrapType) }}
            </template>
            <template slot-scope="scope" slot="approvalNumber" v-if="scope.row.scrapApplication">{{ scope.row.scrapApplication.approvalNumber }}</template>
            <template slot-scope="scope" slot="coded" v-if="scope.row.equipment">{{ scope.row.equipment.coded }}</template>
            <template slot-scope="scope" slot="equipmentName" v-if="scope.row.equipment">{{ scope.row.equipment.name }}</template>
            <template slot-scope="scope" slot="marking" v-if="scope.row.equipment">{{ scope.row.equipment.marking }}</template>
            <template slot-scope="scope" slot="brand" v-if="scope.row.equipment">{{ scope.row.equipment.brand }}</template>
            <template slot-scope="scope" slot="equipmentTypeName" v-if="scope.row.equipment">{{ comEqType(scope.row.equipment.equipmentTypeId) }}</template>
            <template slot-scope="scope" slot="menu">
              <el-button type="primary" size="small"  plain @click="addScrap(scope.row)">添加报废单</el-button>
              <el-button type="primary" size="small"  plain @click.stop="pojoMenuBtn(scope.row,scope.index)">申请单</el-button>
            </template>
          </avue-crud>
        </el-tab-pane>
        <el-tab-pane label="已报废" name="1" >
          <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline" size="mini">
            <el-form-item label="报废类型" prop="scrapType">
              <el-select v-model="searchForm.scrapType" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="item in this.scrapTypeList" :key="item.label" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="存放位置" prop="loc">
              <el-select v-model="searchForm.loc" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="item in this.locList" :key="item.label" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="设备分类">
              <el-select>
                <el-option label="默认" value="0"></el-option>
                <el-option label="默认" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="存放位置">
              <el-select>
                <el-option label="默认" value="0"></el-option>
                <el-option label="默认" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="维保结果">
              <el-select>
                <el-option label="默认" value="0"></el-option>
                <el-option label="默认" value="0"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="设备编码" prop="user">
              <el-input v-model="searchForm.user" placeholder="请输入设备编码"></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="user">
              <el-input v-model="searchForm.user" placeholder="请输入设备名称"></el-input>
            </el-form-item>
            <el-form-item label="设备型号" prop="user">
              <el-input v-model="searchForm.user" placeholder="请输入设备型号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('searchForm')">搜索</el-button>
              <el-button @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </el-form>
          <avue-crud :option="scrapOption" :data="gridData" :table-loading="scrapLoading" :page="page" ref="crud"  @size-change='sizeChanges'
                 @current-change="currentPages">
            <template slot-scope="scope" slot="scrapType">
              {{ formatterStatus(scope.row.scrapType) }}
            </template>
            <template slot-scope="scope" slot="approvalNumber" v-if="scope.row.scrapApplication">{{ scope.row.scrapApplication.approvalNumber }}</template>
            <template slot-scope="scope" slot="coded" v-if="scope.row.equipment">{{ scope.row.equipment.coded }}</template>
            <template slot-scope="scope" slot="equipmentName" v-if="scope.row.equipment">{{ scope.row.equipment.name }}</template>
            <template slot-scope="scope" slot="marking" v-if="scope.row.equipment">{{ scope.row.equipment.marking }}</template>
            <template slot-scope="scope" slot="brand" v-if="scope.row.equipment">{{ scope.row.equipment.brand }}</template>
            <template slot-scope="scope" slot="equipmentTypeName" v-if="scope.row.equipment">{{ comEqType(scope.row.equipment.equipmentTypeId) }}</template>
            <template slot-scope="scope" slot="menu">
              <el-button type="primary" size="small"  plain @click="lookScrap(scope.row, scope.index)">查看</el-button>
              <el-button type="primary" size="small"  plain @click.stop="editScrap(scope.row, scope.index)">修改</el-button>
              <el-button type="primary" size="small"  plain @click.stop="pojoMenuBtn(scope.row, scope.index)">申请单</el-button>
            </template>
          </avue-crud>

        </el-tab-pane>
      </el-tabs>
    </basic-container>

    <el-dialog title="报废单" :visible.sync="examineMode" width="60%" @close="resetForm('form')">
      <div id="printTest">
        <el-row :gutter="10">
          <el-col :span="4">审批单号：</el-col>
          <el-col :span="8">{{ checkInfo.scrapApplication.approvalNumber }}</el-col>
        </el-row>
        <div class="lineDiv"></div>
        <el-row :gutter="10">
          <el-col :span="4">设备类别：</el-col>
          <el-col :span="8"><template v-if="checkInfo.scrapApplication">{{ comEqType( checkInfo.scrapApplication.equipment.equipmentTypeId ) }}</template></el-col>
          <el-col :span="4">设备编码：</el-col>
          <el-col :span="8"><template v-if="checkInfo.scrapApplication">{{ checkInfo.scrapApplication.equipment.coded }}</template></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">设备名称：</el-col>
          <el-col :span="8"><template v-if="checkInfo.scrapApplication">{{ checkInfo.scrapApplication.equipment.name }}</template></el-col>
          <el-col :span="4">型号：</el-col>
          <el-col :span="8"><template v-if="checkInfo.scrapApplication">{{ checkInfo.scrapApplication.equipment.marking }}</template></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">品牌：</el-col>
          <el-col :span="8"><template v-if="checkInfo.scrapApplication">{{ checkInfo.scrapApplication.equipment.brand }}</template></el-col>
          <el-col :span="4">存放位置：</el-col>
          <el-col :span="8">{{ checkInfo.locationName }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">购买价格：</el-col>
          <el-col :span="8"><template v-if="checkInfo.scrapApplication">{{ checkInfo.scrapApplication.equipment.price }}</template></el-col>
          <el-col :span="4">首次启用时间：</el-col>
          <el-col :span="8">{{ checkInfo.firstOpenTime }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">历史维保次数：</el-col>
          <el-col :span="20">{{ checkInfo.historyCount || 0 }}次（保养 {{ checkInfo.maintainCount || 0 }}次，效准 {{ checkInfo.correctCount || 0 }}次，维修 {{ checkInfo.maintenanceCount || 0 }}次）</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="4">历史维保总费用：</el-col>
          <el-col :span="20">{{ checkInfo.historyMoney || 0 }}元（保养 {{ checkInfo.maintainMoney || 0 }}元 ，效准{{ checkInfo.correctMoney || 0 }}元 ，维修 {{ checkInfo.maintenanceMoney || 0 }}元） </el-col>
        </el-row>

        <div class="lineDiv" v-if="examineModeType == 2"></div>
        <el-row :gutter="10">
          <el-col :span="3">报废类型：</el-col>
          <el-col :span="5">
            <template v-if="checkInfo.scrapType == 0">出售</template>
            <template v-else-if="checkInfo.scrapType == 1">处理</template>
            <template v-else-if="checkInfo.scrapType == 2">其他</template>
          </el-col>
          <template v-if="examineModeType == 2">
            <el-col :span="3">申请部门/人：</el-col>
            <el-col :span="5">{{ checkInfo.scrapApplication.departmentName }} - {{ checkInfo.scrapApplication.userName }}</el-col>
            <el-col :span="3">申请时间：</el-col>
            <el-col :span="5">{{ checkInfo.scrapApplication.applicationTime }}</el-col>
          </template>
        </el-row>
        <el-row :gutter="10" v-if="examineModeType == 2">
          <el-col :span="3">报废说明：</el-col>
          <el-col :span="21">{{ checkInfo.remarks }}</el-col>
        </el-row>
        <div class="lineDiv" v-if="examineModeType == 1"></div>

        <template v-if="examineModeType == 1">
          <el-row :gutter="10" >
            <el-col :span="4">处理人：</el-col>
            <el-col :span="8">{{ checkInfo.processor }}</el-col>
            <el-col :span="4">处理时间：</el-col>
            <el-col :span="8">{{ checkInfo.processDate }}</el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="4">出售价格(元)：</el-col>
            <el-col :span="20">{{ checkInfo.price }}</el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="4">备注：</el-col>
            <el-col :span="20">{{ checkInfo.remarks }}</el-col>
          </el-row>
        </template>

        <!-- <el-row :gutter="10" v-if="examineModeType != 3">
          <el-col :span="3">备注：</el-col>
          <el-col :span="21">{{ checkInfo.remarks }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="3">报废类型：</el-col>
          <el-col :span="21">{{ formatterStatus(checkInfo.scrapType) }}</el-col>
        </el-row> -->

        <div class="lineDiv" v-if="examineModeType == 3"></div>
        <el-form ref="form" :rules="rules" :model="addModeForm" label-width="120px" class="demo-ruleForm" >
          <template v-if="examineModeType == 3">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="处理人：" prop="processor">
                <el-input v-model="addModeForm.processor" size="small" placeholder="请输入处理人" clearable style="width: 200px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理时间：" prop="processDate">
                <el-date-picker format="yyyy-MM-dd" size="small" value-format="yyyy-MM-dd" v-model="addModeForm.processDate" type="date" placeholder="请选择处理时间" learable style="width: 200px;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="出售价格(元)：" prop="price">
                <el-input v-model="addModeForm.price" size="small" placeholder="请输入出售价格（元）" clearable style="width: 200px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="备注：" prop="remarks">
                <el-input type="textarea" size="small" v-model="addModeForm.remarks" :autosize="{ minRows: 3, maxRows: 5}" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          </template>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button size="small" type="primary" @click="_approvalNumberVerify(0)" v-if="examineModeType == 2">通  过</el-button>
        <el-button size="small" type="primary" @click="_approvalNumberVerify(1)" v-if="examineModeType == 2">不通过</el-button> -->
        <el-button size="small" type="primary" @click="examineModeSubmit('form')" v-if="examineModeType == 3">提  交</el-button>
        <el-button size="small" @click="examineMode = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>


<script>
    import { option ,scrapOption, jsonToArray} from "@/const-personal/equipment/aintenance/scrap-execution.js"
    import { findScrapPageQuery, insertScrap, findById, getDevTypeList } from "@/api/equipment/aintenance/scrap-execution.js"
    import { validatenull } from '@/util/validate'
    export default {
        data(){
            return{
                option: option, // 待报废表格 配置
                gridData: [ // 待报废表格 数据
                  //  { id: 1, equipment: { equipmentTypeId: 1, coded: 'sss' }, equipmentName: '测试' }
                ],
                loading: false,
                addMode: false, // 报废单 弹窗

                scrapOption: scrapOption,
                scrapLoading: false,
                addForm: {},
                searchForm: {
                  scrapType: '', // 报废类型
                  loc: '',
                },
                page: {
                  total: 0, // 总页数
                  currentPage: 1, // 当前页数
                  pageSize: 10 , // 每页显示多少条
                  pageSizes: [5,10,20]
                },
                scrapTypeList: [ // 报废类型
                  { value: 0, label: '出售' },
                  { value: 1, label: '处理' },
                  { value: 2, label: '其他' },
                ],
                locList: [ // 位置存放
                  { value: 0, label: '仓库' },
                  { value: 1, label: '实验室' },
                ], 
                treeData: [], //设备类型 tree

                checkInfo: {
                  id: '',
                  scrapApplication: {
                    equipment: {},
                  }
                }, // 详情
                examineMode: false, // 报废弹窗
                examineModeType: 0,
                addModeForm: { // 添加弹窗值
                  processor: '',
                  processDate: '',
                  price: '',
                  remarks: ''
                },
                rules: {
                  processor: [
                    { required: true, message: '请输入', trigger: 'blur' }
                  ],
                  processDate: [
                    { required: true, message: '请选择', trigger: 'change' }
                  ],
                  price: [
                    { required: true, message: '请输入', trigger: 'blur' }
                  ],
                },
                tabName: 0, //页面tabs切换

                
            }
        },
        components: {

        },
        computed: {
          formatterStatus () { // 过滤 报废类型
            return ((id) => {
              for (let i = 0; i < this.scrapTypeList.length; i++) {
                if (this.scrapTypeList[i].value == id) {
                  // console.log("name:" + this.equipmentType[i].label)
                  return this.scrapTypeList[i].label
                }
              }
            })
          },
          devArrData () { // 设备类型 array
            return jsonToArray(this.treeData)
          },
          // 设备类别
          comEqType () {
            return ((type) => {
              for (let i = 0; i < this.devArrData.length; i++) {
                if (this.devArrData[i].id == type) {
                  // console.log("name:" + this.equipmentType[i].label)
                  return this.devArrData[i].name
                }
              }
            })
          },
        },
        mounted() {
          this._getDevTypeList()
          this._findScrapPageQuery()
        },
        methods: {
          
          // 查 设备类型 接口 pw
          _getDevTypeList() {
            getDevTypeList().then(res => {
              res = res.data
              if (res.code == 200) {
                this.treeData = res.data;
              } else {
                this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
              }
            })
          },
          // 查 待报废 // 0待报废 1已报废
          _findScrapPageQuery (scrap = 0) {
            let data = {
              scrap : { scrapType: scrap }, // 0待报废 1已报废
              page: this.page.currentPage,
              size: this.page.pageSize
            }
            findScrapPageQuery(data).then(res => {
              res = res.data
              if (res.code == 200) {
                this.gridData = res.data.list;
                this.page.total = res.data.total;
                this.page.currentPage = res.data.pageNum;
                this.page.pageSize = res.data.pageSize;
              } else {
                this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
              }
            })
          },
          // 切换页面
          currentPages (val) {
            this.page.currentPage = val;
            this._findScrapPageQuery(this.tabName);
          },
          sizeChanges (val) {
            this.page.pageSize = val
            this._findScrapPageQuery(this.tabName)
          },
          // 新增 报废单
          _insertScrap () {
            this.addModeForm.id = this.checkInfo.id;
            insertScrap(this.addModeForm).then(res => {
              res = res.data
              if (res.code == 200) {
                this.$notify({ title: "操作成功！", type: 'success'});
                this.examineMode = false;
                this._findScrapPageQuery()
              } else {
                this.$notify.error({ title: '请求失败', message: res.message, type: 'danger' });
              }
            })
          },
          // 查 详情
          _findById(val, type) {
            findById({ id: val }).then(res => {
              res = res.data
              if (res.code == 200) {
                this.checkInfo = res.data;
                if (type == 1) { //修改执行操作
                  this.addModeForm.processor = this.checkInfo.processor;
                  this.addModeForm.processDate = this.checkInfo.processDate;
                  this.addModeForm.price = this.checkInfo.price;
                  this.addModeForm.remarks = this.checkInfo.remarks;
                }
              } else {
                this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
              }
            })
          },
          // 添加 报废单
          addScrap(row) {
            this.examineModeType = 3;
            this.examineMode = true;
            this._findById(row.id)
          },
          // 修改 报废单
          editScrap(row) {
            this.examineModeType = 3;
            this.examineMode = true;
            this._findById(row.id, 1);
          },
          // 查看报废单
          lookScrap(row) {
            this.examineModeType = 1;
            this.examineMode = true;
            this._findById(row.id);
          },
          // 提交 报废单
          examineModeSubmit(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this._insertScrap()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          // 申请单
          pojoMenuBtn(row) {
            this.examineModeType = 2;
            this.examineMode = true;
            this._findById(row.id);
          },
          // 搜索
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this._findScrapPageQuery(this.tabName)
              } else {
                console.log('error submit!!');
                return false;
              }
            });

          },
          // 表单重置
          resetForm(formName) {
            this.$refs[formName].resetFields();
            if (formName == 'searchForm') {
              this.page.currentPage = 1;
              this.page.pageSize = 10;
            }
          },
          // 切换tabs
          aaa(type) {
            this.tabName = type.name;
            this.gridData = [];
            this.page = {
              total: 0, // 总页数
              currentPage: 1, // 当前页数
              pageSize: 10 , // 每页显示多少条
            }
            // console.log(this.tabName)
            this._findScrapPageQuery(this.tabName)
            
            if (type.name === 0) {
              console.log(type.name)
            } else {
              console.log(type.name)
            }
          }
        }
    }
</script>
<style lang="scss" scoped>
  .el-row {
    margin-left: 20px!important;
    margin-bottom: 20px;
    .el-col-3,.el-col-4{
      font-weight: 600;
    }
  }
  .lineDiv{
    border-top: 1px solid #d6d6d6;
    margin: 0px 1% 20px 25px;
    width: 90%;
  }
  .el-dialog__body{
    padding-top: 15px;
    padding-bottom: 0px;
  }
</style>
<style lang="scss">
.avue-crud__menu{
  min-height: 0px;
}
.el-divider{
  display: block;
  height: 1px;
  width: 100%;
  margin: 0 0 24px 0;
  background-color: #dcdfe6;
  position: relative;
}.zindex1>.el-form-item__content{
   z-index: -1;
 }
  .el-dialog__body .el-row{
    margin-bottom: 8px;
    margin-left: 8px;
  }
</style>
